
            <div class="row">
                <div class="col-12">
                    <div>
                        <h1>Tab Settings</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Tabs</li>
                            <li class="active">Tab Settings</li>
                        </ol>
                    </div>
                </div>
            </div>

        <div class="ajax-container">
            <section class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default tab-container">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="glyphicon glyphicon-folder-close"></i> Tab Settings</h2>
                        </div>
                        <div class="panel-body tabs tabs-top no-padding">
                            <ul  class="nav nav-tabs">
                                <li class="active"><a href="#form-settings-container" data-toggle="tab"><i class="fa fa-bars"></i> <span class="hidden-xs">Settings</span></a></li>
                                <li><a href="#code" data-toggle="tab"><i class="fa fa-code"></i> <span class="hidden-xs">Code</span></a></li>
                                <li><a href="#google-code" data-toggle="tab"><i class="fa fa-code"></i> <span class="hidden-xs">Pretty Code</span></a></li>
                            </ul>
                            <div class="tab-content media-body">
                                <div id="form-settings-container" class="tab-pane active form-container">
                                    <form class="form-vertical form-bordered form-condensed form-column">
                                        <fieldset class="col-12">
                                            <legend>Inputs</legend>
                                            <ul>
                                                <li class="form-group row shown-default">
                                                    <label for="tabs-position" class="control-label col-12">Tabs Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="tabs-position" id="tabs-position" class="form-control input-sm">
                                                                    <option value="tabs-top" selected>top</option>
                                                                    <option value="tabs-left">left</option>
                                                                    <option value="tabs-right">right</option>
                                                                    <option value="tabs-bottom">bottom</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="tabs-padding" class="control-label col-12">Padding</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="tabs-padding" id="tabs-padding" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                         <div class="submit-group col-12 align-right">
                                            <input type="button" name="reset" id="reset" class="btn btn-primary" value="Reset">
                                        </div>
                                    </form>
                                </div>
                                <div id="code" class="tab-pane no-padding">
                                    <pre id="copy-code" class="code-container">&nbsp;</pre>
                                </div>
                                <div id="google-code" class="tab-pane no-padding">
                                    <pre id="pretty-code" class="prettyprint linenums">&nbsp;</pre>
                                </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-settings" class="col-lg-6">
<div class="panel panel-default tab-container">
    <div class="panel-heading">
        <h2 class="panel-title"><i class="glyphicon glyphicon-folder-close"></i> Tabs Preview</h2>
    </div>
    <div class="panel-body tabs tabs-top no-padding">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#inbox" data-toggle="tab"><i class="fa fa-inbox"></i> <span class="hidden-xs">Inbox</span></a></li>
            <li><a href="#draft" data-toggle="tab"><i class="fa fa-edit"></i> <span class="hidden-xs">Draft</span></a></li>
            <li><a href="#sent" data-toggle="tab"><i class="fa fa-share"></i> <span class="hidden-xs">Sent</span></a></li>
            <li><a href="#trash" data-toggle="tab"><i class="fa fa-trash-o"></i> <span class="hidden-xs">Trash</span></a></li>
        </ul>
        <div class="tab-content media-body">
            <div id="inbox" class="tab-pane active">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div id="draft" class="tab-pane">
                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
            <div id="sent" class="tab-pane">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div id="trash" class="tab-pane">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
</div>
                    </div>
                </section>
                <!-- page-script -->
                <script type="text/javascript" src="<?= base_url() ?>js/scripts/tab-settings.js"></script>
            </div>
        